App = new Object();
App.Core = new Object();
App.LoginUser = null;
var mainViewPort;

var menu_store = Ext.create('Ext.data.Store', {
	fields : [ 'id', 'name', 'order', 'status', 'perantid', 'childMenuItems', 'action', 'screenId' ]
});

App.screenPermiton = Ext.create('Ext.data.Store', {
	fields : [ 'screenid', 'create', 'view', 'confirm', 'reject' ]
});

var main_item = [];
App.Core = {
	getMainView : function(loginUserName) {
		App.LoginUser = loginUserName;
		this.mainViewPort = Ext.create('Ext.container.Viewport', {
			layout : 'border',
			width : 1000,
			margin : 'auto',
			style : {
				margin : 'auto'
			},
			items : [ {
				region : 'north',
				xtype : 'container',
				height : 50,
				html : 'header goes here',
				split : false,
				border : true
			}, {
				region : 'center',
				xtype : 'panel',
				layout : 'fit',
				border : false,
				items : [ this.getMainContainer() ]
			}, {
				region : 'west',
				xtype : 'panel',
				width : 200,
				split : false,
				html : 'Notification',
				layout : 'fit',
				border : true
			} ],
			showLoading : function(msg) {
				var el = this.getEl();
				if (el) {
					if (msg) {
						el.mask(msg);
					} else {
						el.unmask();
					}
				}
			}
		});
	},
	mainContainer : null,
	getMainContainer : function() {
		if (!this.mainContainer) {
			this.mainContainer = Ext.create('Ext.panel.Panel', {
				layout : 'fit',
				tbar : [ this.getMainMenu(), '->', {
					text : 'LOGOUT',
					handler : function() {
						App.Core.showLogingPAge();
					}
				}, '|', "<B>" + App.LoginUser.toUpperCase() + "</B>" ],
				showLoading : function(msg) {
					var el = this.getEl();
					if (el) {
						if (msg) {
							el.mask(msg);
						} else {
							el.unmask();
						}
					}
				}
			});
		}
		return this.mainContainer;
	},

	mainMenu : null,
	getMainMenu : function() {
		this.mainMenu = Ext.create('Ext.toolbar.Toolbar', {
			id : 'menuToolbar',
			xtype : 'toolbar',
			dock : 'top',
			border : false,
			layout : {
				overflowHandler : 'Menu'
			},
			listeners : {
				beforerender : function() {
					var menu_store = Ext.create('Ext.data.Store', {
						fields : [ 'id', 'name', 'order', 'status', 'perantid', 'childMenuItems', 'action', 'screenId' ],
						autoLoad : true,
						listeners : {
							load : function(store, records, success, operation, opts) {
								var toolbar = Ext.getCmp('menuToolbar');
								store.each(function(record) {
									var menu = Ext.create('Ext.menu.Menu');
									Ext.each(record.raw.childMenuItems, function(item) {
										if (item.childMenuItems == null) {
											menu.add({
												text : item.name,
												icon : 'images/usergroup2.png',
												handler : function() {
													var action = eval(item.action);
													App.Core.setScreen(action, item.screenId);
												}
											});
										} else {
											var submenu = Ext.create('Ext.menu.Menu');
											Ext.each(item.childMenuItems, function(subitem) {
												submenu.add({
													text : subitem.name,
													icon : 'images/user2.png',
													handler : function() {
														var action = eval(subitem.action);
														App.Core.setScreen(action, item.screenId);
													}
												});
											});
											menu.add({
												text : item.name,
												menu : submenu
											});
										}
									});
									toolbar.add({
										text : record.data.name,
										menu : menu
									});
								});
							}
						}
					});
					Ext.Ajax.request({
						url : 'getMenuByGroup.action',
						success : function(response) {
							var obj = Ext.decode(response.responseText);
							menu_store.loadRawData(obj.menuItemDtos);
						}
					});
				}
			}
		});
		return this.mainMenu;
	},
	setScreen : function(action, screen) {
		var container = this.getMainContainer();
		var myMask = new Ext.LoadMask(container, {
			msg : "Loading..."
		});
		myMask.show();
		Ext.Ajax.request({
			params : {
				"screen_id" : screen
			},
			url : 'getScreenPermition.action',
			success : function(response) {
				var obj = Ext.decode(response.responseText);
				App.screenPermiton.loadRawData(obj);
				container.removeAll();
				container.add(action);
				myMask.hide();
			},
			failure : function(form, action) {
				Ext.Msg.alert('Failed', "You have not permission for this screen");
				myMask.hide();
			}
		});
	},

	removeScreen : function() {
		var container = this.getMainContainer();
		container.removeAll();
	},
	showLoading : function(msg) {
		this.getMainContainer().showLoading(msg);
	},
	showLogingPAge : function() {
		window.location.reload();
	}
};

Ext.onReady(function() {
	// App.Core.getMainView();
});
